<template>
  <div class="freight">
    <el-container class="freight-box">
      <el-main class="freight-center">
        <el-row>
          <el-col style="background-color: #ffffff;padding: 20px 0 20px 50px">
            <el-button style="background-color: #e15536;color: #fff;" @click="showTemplate">新增模板</el-button>
          </el-col>
          <el-table
            style="width: 100%"
            size="small"
            :data="freightList"
          >
            <el-table-column
              prop="templateType"
              label="模板类型"
              width="150"
              align="center"
            >
              <template slot-scope="scope">
                <div v-if="scope.row.templateType === 1">
                  同城寄
                </div>
                <div v-else-if="scope.row.templateType === 2">
                  省内寄
                </div>
                <div v-else-if="scope.row.templateType === 3">
                  经济区互寄
                </div>
                <div v-else-if="scope.row.templateType === 4">
                  跨省
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="transportType"
              label="运送类型"
              width="130"
              align="center"
            >
              <template slot-scope="scope">
                <div v-if="scope.row.transportType === 1">
                  普快
                </div>
                <div v-else-if="scope.row.transportType === 2">
                  特快
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="associatedCityList"
              label="关联城市"
              width="150"
              align="center"
            >
              <template slot-scope="scope">
                <div v-if="+scope.row.associatedCityList[0] === 1">
                  全国
                </div>
                <div v-else-if="+scope.row.associatedCityList[0] === 2">
                  京津冀
                </div>
                <div v-else-if="+scope.row.associatedCityList[0] === 3">
                  江浙沪
                </div>
                <div v-else-if="+scope.row.associatedCityList[0] === 4">
                  川渝
                </div>
                <div v-else-if="+scope.row.associatedCityList[0] === 5">
                  黑吉辽
                </div>
                <div v-else>
                  {{ scope.row.associatedCityList[0] }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="firstWeight"
              label="首重"
              width="130"
              align="center"
            />
            <el-table-column
              prop="continuousWeight"
              label="续重"
              width="130"
              align="center"
            />
            <el-table-column
              prop="lightThrowingCoefficient"
              label="轻抛系数"
              width="130"
              align="center"
            />
            <el-table-column
              label="操作"
              align="center"
            >
              <template v-slot="{row}">
                <a style="color: #41b6fd" @click="compileClick(row)">编辑</a>
                <span style="padding: 0 5px;color: #dcdfe6">|</span>
                <a style="color: #f58283" @click="delClick(row.id)">删除</a>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </el-main>
      <!-- $底部样式 -->
      <el-footer style="background-color: #f3f4f7;padding-top: 100px">
        <el-row type="flex" justify="center" align="bottom" style="height: 100%">
          <el-col style="text-align: center">
            <div style="font-size: 14px;margin-bottom: 15px;color: #cec4cd">江苏传智播客教育科技股份有限公司 版权所有Copyright 2006-2022 All Rights Reserved 苏ICP备16007882号-11</div>
          </el-col>
        </el-row>
      </el-footer>
    </el-container>
    <!-- $dialog弹窗 -->
    <el-dialog
      :title="title"
      :visible.sync="isFreightDialog"
      width="38%"
      @close="close"
    >
      <el-form
        id="selectForm"
        ref="ruleForm"
        size="mini"
        label-width="80px"
        :model="FromData"
        :rules="rules"
      >
        <el-form-item prop="templateType">
          <template slot="label">
            <div class="label" style="display: inline-block;">模版类型</div>
          </template>
          <el-select v-model="FromData.templateType" style="width: 90%" placeholder="请选择活动区域">
            <el-option label="同城寄" :value="1" />
            <el-option label="省内寄" :value="2" />
            <el-option label="经济区互寄" :value="3" />
            <el-option label="跨省" :value="4" />
          </el-select>
        </el-form-item>
        <el-form-item prop="transportType">
          <template slot="label">
            <div class="label" style="display: inline-block;">运动类型</div>
          </template>
          <el-select v-model="FromData.transportType" style="width: 90%" placeholder="请选择活动区域">
            <el-option label="普快" :value="1" />
            <el-option label="特快" :value="2" />
          </el-select>
        </el-form-item>

        <el-form-item prop="associatedCityList">
          <template slot="label">
            <div class="label" style="display: inline-block;">关联城市</div>
          </template>
          <el-checkbox-group v-model="FromData.associatedCityList" size="mini">
            <el-checkbox ref="check" label="1" name="type" :disabled="flag">全国</el-checkbox>
            <el-checkbox label="2" name="type" :disabled="isflag">京津冀</el-checkbox>
            <el-checkbox label="3" name="type" :disabled="isflag">江浙沪</el-checkbox>
            <el-checkbox label="4" name="type" :disabled="isflag">川渝</el-checkbox>
            <el-checkbox label="5" name="type" :disabled="isflag">黑吉辽</el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item prop="firstWeight">
          <template slot="label">
            <div class="label" style="display: inline-block;">首重价格</div>
          </template>
          <el-input v-model="FromData.firstWeight" autocomplete="off" style="width: 90%" />
        </el-form-item>
        <el-form-item prop="continuousWeight">
          <template slot="label">
            <div class="label" style="display: inline-block;">续重价格</div>
          </template>
          <el-input v-model="FromData.continuousWeight" autocomplete="off" style="width: 90%" />
        </el-form-item>
        <el-form-item prop="lightThrowingCoefficient">
          <template slot="label">
            <div class="label" style="display: inline-block;">轻抛系数</div>
          </template>
          <el-input v-model="FromData.lightThrowingCoefficient" autocomplete="off" style="width: 90%" />
        </el-form-item>
        <!-- $按钮模块 -->
        <el-form-item style="padding-top: 20px">
          <el-row type="flex" justify="center">
            <el-col :span="14">
              <el-button style="background-color: #e15536;color: #fff;" @click="addTemplate">确认</el-button>
              <el-button @click="close">取消</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getFreightList, addFreight, delFreight } from '@/api/essential'
export default {
  data() {
    return {
      flag: true,
      isflag: true,
      CityList: [], // 储存选中的城市
      FromData: {
        associatedCityList: [], // 关联城市：1-全国，2-京津冀，3-江浙沪，4-川渝，5-黑吉辽
        continuousWeight: null, // 续重价格
        firstWeight: null, // 首重价格
        lightThrowingCoefficient: null, // 运费模版ID，轻抛系数
        templateType: null, // 模板类型：1-同城寄，2-省内寄，3-经济区互寄，4-跨省
        transportType: 1 // 运送类型：1-普快，2-特快
      },
      rules: {
        associatedCityList: [
          { required: true, message: '数据不能为空', trigger: 'blur' }
        ],
        continuousWeight: [
          { required: true, message: '数据不能为空', trigger: 'blur' }
        ],
        firstWeight: [
          { required: true, message: '数据不能为空', trigger: 'blur' }
        ],
        lightThrowingCoefficient: [
          { required: true, message: '数据不能为空', trigger: 'blur' }
        ],
        templateType: [
          { required: true, message: '数据不能为空', trigger: 'change' }
        ],
        transportType: [
          { required: true, message: '数据不能为空', trigger: 'change' }
        ]
      },
      title: '',
      isFreightDialog: false, // 弹出框开关
      freightList: [], // 存储表格模版数据
      checked: ''
    }
  },

  watch: {
    FromData: {
      deep: true,
      immediate: true,
      handler() {
        this.isflag = false
        if (this.FromData.associatedCityList.some(item => item === '2' || item === '3' || item === '4' || item === '5')) {
          if (this.FromData.associatedCityList.some(item => item === '1')) this.FromData.associatedCityList.shift()
          this.flag = true
        } else {
          this.flag = false
        }

        if (this.FromData.associatedCityList.some(item => item === '1')) {
          this.isflag = true
        } else {
          this.isflag = false
        }
      }
    }
  },
  created() {
    this.getFreightList() // 打开页面渲染数据
  },
  methods: {
    async getFreightList() { // 获取表格模板数据
      const res = await getFreightList()
      this.freightList = res.data
    },
    showTemplate() { // 新增模版弹窗
      this.title = '新增模版'
      this.isFreightDialog = true
    },
    close() { // 清除表单数据，关闭模态框
      this.isFreightDialog = false
      this.$refs.ruleForm.resetFields()
    },
    addTemplate() { // 新增模版————> 确定按钮
      this.$refs.ruleForm.validate(async isOK => {
        if (isOK) {
          const res = await addFreight(this.FromData)
          if (res.code === 1) {
            this.$message.error(res.msg)
            return
          } else {
            this.$message.success('新增模版成功')
            this.getFreightList()
            this.close()
          }
        }
      })
    },
    compileClick(row) { // 编辑按钮
      this.FromData.associatedCityList = []
      const list = JSON.stringify(row) // 使用JSON.stringify和JSON.parse转换，使地址不指向同一地址
      this.FromData = JSON.parse(list)
      this.title = '编辑模版'
      this.isFreightDialog = true
    },
    async compileTemplate() { // 编辑模版————> 确定按钮
      const res = await addFreight()
      console.log(res)
    },
    async delClick(id) { // 删除模版
      await delFreight(id)
      this.getFreightList() // 重新渲染数据
      this.$message.success('删除模版成功')
    }

  }

}
</script>

<style lang="scss" scoped>
  .freight-box{
    .freight-center{
      background-color: #f3f4f7;
      padding: 30px;
    }
  }
  .label {
    font-size: 12px;
  }
</style>
